<!--
 * @Author: YSM
 * @Description: 动画
 * @Date: 2024-05-09 17:09:58
 * @LastEditTime: 2024-05-10 17:51:50
 * @FilePath: \my_vue2_demo\src\views\animation\index.vue
-->
<template>
    <div>
        <el-divider content-position="center">文本滚动动画</el-divider>
        <div class="scroll-box">
            <p style="width:800px">
                <txtScroll :speed="40" direction='left' :textScroll='text' />
            </p>
        </div>
        <el-divider content-position="center">文本滚动动画2</el-divider>
        <div class="scroll-box">
            <p style="width:400px">
                <txtScrollTwo>
                    我是一段可以滚动的滚动文字，我正在缓慢的自右向左的滚动
                </txtScrollTwo>
            </p>
        </div>
        <el-divider content-position="center">数字滚动加载动画</el-divider>
        <div class="scroll-box">
            <numberScroll :value='23456788'></numberScroll>
        </div>
    </div>
</template>

<script>
import txtScroll from './components/txtScroll.vue';
import txtScrollTwo from './components/txtScrollTwo.vue';
import numberScroll from './components/numberScroll'
export default {
    components: {
        txtScroll, txtScrollTwo, numberScroll
    },
    data() {
        return {
            text: '我是一段可以滚动的滚动文字，我正在缓慢的自右向左的滚动'
        };
    }
};
</script>
<style lang="less" scoped>
.scroll-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>